<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类式组件</title>
</head>
<script src="./js/react.development.js"></script>
<script src="./js/react-dom.development.js"></script>
<script src="./js/babel.min.js"></script>
<!-- 引入 babel  将jsx语法 转换为 js语法 -->
<script src="./js/babel.min.js"></script>
<style>

    .news{
        width: 80%;
        text-align: center;
        margin: 20px auto;
    }
    .content{
        line-height: 30px;
        font-size: 20px;
        
        
    }
</style>
<body>
    <div id="root"></div>
    <script type="text/babel">
        let data = {
        title:"中国特色强军之路的时代答卷",
        content:`党的十八大以来，中国特色社会主义进入新时代，国防和军队建设也进入新时代。
                人民军队这十年，是浴火重生的十年，是强军兴军的十年，是阔步迈向世界一流的十年。
                进入新时代，习近平主席站在统筹“两个大局”的战略高度，鲜明提出党在新时代的强军目标，确立新时代军事战略方针，制定到2027年实现建军一百年奋斗目标、到2035年基本实现国防和军队现代化、到本世纪中叶全面建成世界一流军队的国防和军队现代化新“三步走”战略，引领人民军队在中国特色强军之路上阔步前行，为实现中华民族伟大复兴提供了坚强有力的战略支撑。`,
        image:"https://img-xhpfm.xinhuaxmt.com/News/202209/dcc1c14968f646d48caec00fcdc8acb8.jpg?x-oss-process=image/resize,w_1000/auto-orient,1/quality,Q_80"
    }

    let vdom=<div className='news'>
            <h1 style={{color:'red',fontSize:'30px'}}>{data.title}</h1>
            <p className='content'>{data.content}</p>
            <img src={data.image} alt="" style={{width:'100%',height:'400px'}}/>
        </div>

    ReactDOM.render(vdom,document.querySelector('#root'))
    </script>
</body>
</html>